<template>
  <div class="left-content">
    <div class="top-num m-t-12">
      <div class="top-num-cont">
        <div class="top-num-cont-img"></div>
        <div class="top-num-cont-right">
          <div class="n-c-title">
            机器总量
            <div class="n-c-num">205</div>
          </div>
        </div>
      </div>
      <div class="top-num-cont">
        <div class="top-num-cont-img"></div>
        <div class="top-num-cont-right">
          <div class="n-c-title">
            GPU总量
            <div class="n-c-num">1600</div>
          </div>
        </div>
      </div>
      <div class="top-num-cont">
        <div class="top-num-cont-img"></div>
        <div class="top-num-cont-right">
          <div class="n-c-title">
            存储总量
            <div class="n-c-num">20.45</div>
          </div>
        </div>
      </div>
    </div>
    <div class="source m-t-20">
      <div class="cont-title">
        资源分布
      </div>
      <div class="source-content">
        <div class="source-item">
          <!-- 机器 -->
          <v-chart class="chart" :option="machine_option" />
        </div>
        <div class="source-item">
          <!-- GPU -->
          <v-chart class="chart" :option="gpu_option" />
        </div>
      </div>
    </div>
    <div class="source_tendency">
      <div class="cont-title">
        资源趋势
      </div>
      <div class="machine_num m-t-16">
        <!-- 机器数量趋势 -->
        <v-chart class="chart" :option="machine_num_option" />
      </div>
      <div class="source-content m-t-22">
        <div class="source-item">
          <!-- 机器出租率 -->
          <v-chart class="chart" :option="machine_rate_option" />
        </div>
        <div class="source-item">
          <!-- GPU出租率 -->
          <v-chart class="chart" :option="gpu_rate_option" />
        </div>
      </div>
    </div>
    <div class="bottom-cont m-t-26">
      <div class="bottom-item">
        <div class="bottom-item-title">
          算力国产化率
        </div>
        <div class="bottom-item-cont">
          50.23%
        </div>
      </div>
      <div class="bottom-item">
        <div class="bottom-item-title">
          网络带宽总量
        </div>
        <div class="bottom-item-cont">
          15Gb
        </div>
      </div>
      <div class="bottom-item">
        <div class="bottom-item-title">
          存储占用
        </div>
        <div class="bottom-item-cont">
          15EB
        </div>
      </div>
      <div class="bottom-item">
        <div class="bottom-item-title">
          离线机器数量
        </div>
        <div class="bottom-item-cont">
          0
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import {getLast7Days, generateRates} from '@/utils/publicMethod'
// 机器资源分布（饼图）
const machine_option = ref({
  tooltip: {
      trigger: 'item',
      formatter: '{b}'
  },
  legend: {
    orient: 'vertical',  // 垂直排列图例项
      right: -5,          // 靠右显示
      top: 'center',      // 垂直居中
      textStyle: {
          color: '#D3D6DD'
      },
      data: ['机器在线 50%', '机器上架 25%', '机器占用 25%']
  },
  series: [
    {
      name: '机器状态',
      type: 'pie',
      radius: ['40%', '70%'], // 环形饼图
      center: ['30%', '45%'],
      itemStyle: {
          borderRadius: 2,
          borderColor: '#000',
          borderWidth: 2
      },
      label: {
          show: false,
          position: 'center'
      },
      labelLine: {
          show: false
      },
      emphasis: {  // 新增hover效果配置
        label: {
          show: true,
          fontSize: 12,
          fontWeight: 'bold',
          color: '#D3D6DD',
        }
      },
      data: [
          { value: 50, name: '机器在线 50%', itemStyle: { color: '#5B8FF9' } },
          { value: 25, name: '机器上架 25%', itemStyle: { color: '#5AD8A6' } },
          { value: 25, name: '机器占用 25%', itemStyle: { color: '#F6BD16' } }
      ]
    }
  ]
})
// GPU资源分布（饼图）
const gpu_option = ref(
{
  tooltip: {
      trigger: 'item',
      formatter: '{b}'
  },
  legend: {
    orient: 'vertical',  // 垂直排列图例项
      right: -5,          // 靠右显示
      top: 'center',      // 垂直居中
      textStyle: {
          color: '#D3D6DD'
      },
      data: ['GPU在线 50%', 'GPU上架 25%', 'GPU占用 25%']
  },
  series: [
    {
      name: 'GPU状态',
      type: 'pie',
      radius: ['40%', '70%'], // 环形饼图
      center: ['30%', '45%'],
      itemStyle: {
          borderRadius: 2,
          borderColor: '#000',
          borderWidth: 2
      },
      label: {
          show: false,
          position: 'center'
      },
      labelLine: {
          show: false
      },
      emphasis: {  // 新增hover效果配置
        label: {
          show: true,
          fontSize: 12,
          fontWeight: 'bold',
          color: '#D3D6DD',
        }
      },
      data: [
          { value: 50, name: 'GPU在线 50%', itemStyle: { color: '#5B8FF9' } },
          { value: 25, name: 'GPU上架 25%', itemStyle: { color: '#5AD8A6' } },
          { value: 25, name: 'GPU占用 25%', itemStyle: { color: '#F6BD16' } }
      ]
    }
  ]
})
// 机器数量趋势（柱状图）
const machine_num_option = ref({
  title: {
      text: '机器数量趋势（近7天）',
      left: 'center',
      textStyle: {
          color: '#D3D6DD',
          fontSize: 16,
                    // fontWeight: 'bold'
      }
  },
  tooltip: {
      trigger: 'axis',
      axisPointer: {
          type: 'shadow'
      }
  },
  legend: {
      data: ['总量', '上架', '在线'],
      top: 30,
      textStyle: {
          color: '#D3D6DD'
      }
  },
  grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
  },
  xAxis: {
      type: 'category',
      data: getLast7Days(),
      axisLabel: {
          interval: 0,
          rotate: 0,
          color: '#D3D6DD' // 横轴标签字体颜色改为白色
      }
  },
  yAxis: {
      type: 'value',
      name: '数量（台）',
      nameTextStyle: {
          color: '#D3D6DD' // 纵轴名称颜色改为白色
      },
      axisLabel: {
          color: '#D3D6DD' // 纵轴标签字体颜色改为白色
      },
      axisLine: {
          lineStyle: {
              color: '#D3D6DD' // 纵轴线颜色改为白色
          }
      },
      splitLine: {
          show: false // 关闭分割线
          // lineStyle: {
          //     color: 'rgba(255, 255, 255, 0.2)' // 网格线改为半透明白色
          // }
      }
  },
  series: [
      {
          name: '总量',
          type: 'bar',
          barGap: 0,  // 同系列柱间无间隙
          barCategoryGap: '30%',  // 不同类目间的柱间距离
          barWidth: 15,
          itemStyle: {
              color: '#5470C6'
          },
          data: [120, 132, 145, 160, 172, 190, 210]
      },
      {
          name: '上架',
          type: 'bar',
          barGap: 0,  // 同系列柱间无间隙
                    barCategoryGap: '30%',  // 不同类目间的柱间距离
          barWidth: 15,
          itemStyle: {
              color: '#91CC75'
          },
          data: [80, 95, 105, 110, 125, 140, 150]
      },
      {
          name: '在线',
          type: 'bar',
          barGap: 0,  // 同系列柱间无间隙
                    barCategoryGap: '30%',  // 不同类目间的柱间距离
          barWidth: 15,
          itemStyle: {
              color: '#EE6666'
          },
          data: [60, 72, 85, 90, 100, 110, 125]
      }
  ]
})
// 机器出租率（柱状图）
const machine_rate_option = ref({
  title: {
      text: '机器出租率趋势（近7天）',
      left: 'center',
      textStyle: {
          color: '#D3D6DD',
          fontSize: 16,
      }
  },
  tooltip: {
      trigger: 'axis',
      axisPointer: {
          type: 'shadow'
      },
      formatter: '{b}<br/>出租率: {c}%'
  },
  grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
  },
  xAxis: {
      type: 'category',
      data: getLast7Days(),
      axisLabel: {
          rotate: 30, // 如果日期太长可以旋转30度
          color: '#D3D6DD'
      },
      axisLine: {
          lineStyle: {
              color: '#ccc'
          }
      }
  },
  yAxis: {
      type: 'value',
      name: '出租率(%)',
      min: 0,
      max: 100,
      nameTextStyle: {
          color: '#D3D6DD' // 纵轴名称颜色改为白色
      },
      axisLabel: {
          formatter: '{value}%',
          color: '#D3D6DD'
      },
      splitLine: {
          show: false // 关闭分割线
          // lineStyle: {
          //     type: 'dashed'
          // }
      }
  },
  series: [{
      name: '出租率',
      type: 'bar',
      barWidth: '40%',
      data: generateRates(),
      itemStyle: {
          color: function(params:any) {
              // 根据数值不同显示不同颜色
              const value = params.value;
              if (value >= 80) return '#ee6666'; // 高出租率-红色
              if (value >= 50) return '#5470c6'; // 中等出租率-蓝色
              return '#91cc75'; // 低出租率-绿色
          }
      },
      label: {
          show: true,
          color: '#D3D6DD',
          position: 'top',
          formatter: '{c}%'
      }
  }]
})
// GPU出租率
const gpu_rate_option = ref({
  title: {
      text: 'GPU出租率趋势（近7天）',
      left: 'center',
      textStyle: {
          color: '#D3D6DD',
          fontSize: 16,
          // fontWeight: 'bold'
      }
  },
  tooltip: {
      trigger: 'axis',
      axisPointer: {
          type: 'shadow'
      },
      formatter: '{b}<br/>出租率: {c}%'
  },
  grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
  },
  xAxis: {
      type: 'category',
      data: getLast7Days(),
      axisLabel: {
          rotate: 30, // 如果日期太长可以旋转30度
          color: '#D3D6DD'
      },
      axisLine: {
          lineStyle: {
              color: '#ccc'
          }
      }
  },
  yAxis: {
      type: 'value',
      name: '出租率(%)',
      min: 0,
      max: 100,
      nameTextStyle: {
          color: '#D3D6DD' // 纵轴名称颜色改为白色
      },
      axisLabel: {
          formatter: '{value}%',
          color: '#D3D6DD'
      },
      splitLine: {
        show: false // 关闭分割线
      }
  },
  series: [{
      name: '出租率',
      type: 'bar',
      barWidth: '40%',
      data: generateRates(),
      itemStyle: {
          color: function(params:any) {
              // 根据数值不同显示不同颜色
              const value = params.value;
              if (value >= 80) return '#ee6666'; // 高出租率-红色
              if (value >= 50) return '#5470c6'; // 中等出租率-蓝色
              return '#91cc75'; // 低出租率-绿色
          }
      },
      label: {
          show: true,
          color: '#D3D6DD',
          position: 'top',
          formatter: '{c}%'
      }
  }]
})
</script>
<style scoped lang="scss">
.left-content {
  width: 100%;
  height: 100%;
  .cont-title {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: bold;
  }
  .top-num {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    .top-num-cont {
      width: calc(100% / 3 - 10px);
      display: flex;

      .top-num-cont-img {
        width: 35%;
        height: 100%;
        margin-right: 5%;
        background-image: url("@/assets/img/left_top_huang.png");
      }
      .top-num-cont-right {
        flex: 1;
        .n-c-title {
          font-size: 14px;
        }
        .n-c-num {
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
  .source{
    .source-content {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      .source-item {
        width: calc(100% / 2 - 10px);
        height: 200px;
      }
    }
  }  
  .source_tendency {
    .machine_num {
      width: 100%;
      height: 210px;
    }
    .source-content {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      .source-item {
        width: calc(100% / 2 - 10px);
        height: 210px;
      }
    }
  }
  .bottom-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    .bottom-item {
      width: calc(100% / 4 - 10px);
      text-align: center;
      .bottom-item-title {
        font-size: 14px;
        font-weight: bold;
      }
      .bottom-item-cont {
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
}
</style>